<template>
	<view class="con">
		 
		<view class="flex-ju-b bgfff height100 color999 size29 posifi width1000 top0" :style="{paddingTop:shh+'px'}">
			<uni-icons @click="back" type="back" color="#333333" size="23"></uni-icons>
			<view class="flex-ju-b width400">
				<view @click="tabfocus(1)" :class="{txtactive:tindex==1}" class="flex-ju-c flex-col">
					互相关注
					<view :class="{active:tindex==1}" class="bline wh55-7 ra7 bgfff mt5"></view>
				</view>
				<view @click="tabfocus(2)" :class="{txtactive:tindex==2}" class="flex-ju-c flex-col">
					关注
					<view :class="{active:tindex==2}" class="bline wh55-7 ra7 bgfff mt5"></view>
				</view>
				<view @click="tabfocus(3)" :class="{txtactive:tindex==3}" class="flex-ju-c flex-col">
					粉丝
					<view :class="{active:tindex==3}" class="bline wh55-7 ra7 bgfff mt5"></view>
				</view>
			</view>
			<uni-icons type="back" color="#fff" size="23"></uni-icons>
		</view>
		
		<view class="mt130 color333 size22">
			<!-- <view class="flex-a-i height70 ra70 bgEDEDED pl20 mb30">
				<image mode="widthFix" class="image width26" src="/static/img/sousou.png"></image>
				<input class="size26 pl10" placeholder="搜索已关注的人"/>
			</view> -->
			<view class="mb30">{{tindex==1?'互相关注':tindex==2?'我的关注':'我的粉丝'}}{{count}}人</view>
			<nodata v-if="isdata"></nodata>
			<view  v-for="(item,ib) in infolist" :key="ib" class="height150 flex-ju-b border-tEDEDED">
				<view @click="navto('others?uid='+item.uid)" class="flex-a-i">
					<image class="image wh76-76 ra76 mr10" :src="item.avatar?item.avatar:'/static/mo.png'"></image>
					<view>
						<view class="bold size29">{{item.nickname}}</view>
						<view class="color999 mt5">{{item.mark?item.mark:'未设置'}}</view>
					</view>
				</view>
				<view v-if="tindex==1" class="flex-a-i">
					<view @click="tochat(item)" class="flex-ju-c wh115-48 ra48 border999">私信</view>
					<view @click.stop="tabfouce(item.uid,ib)" class="width30 flex-row">
						<image class="image width6" mode="widthFix" src="/static/img/sandian.png"></image>
					</view>
				</view>
				<view v-if="tindex==2" class="flex-a-i">
					<view @click.stop="" class="flex-ju-c wh115-48 ra48 color999 border999">
						<image class="image width20 mr5" mode="widthFix" src="/static/img/xiaogou.png"></image>
						已关注</view>
					<view @click.stop="tabfouce(item.uid,ib)" class="width30 flex-row">
						<image class="image width6" mode="widthFix" src="/static/img/sandian.png"></image>
					</view>
				</view>
				<view v-if="tindex==3" class="flex-a-i">
					<view @click.stop="" v-if="item.is_care" class="flex-ju-c wh115-48 ra48 color999 border999">
					互相关注</view>
					
					<view @click.stop="guanzhu(item)" v-else class="flex-ju-c wh115-48 ra48 color27A752 border27A752">
						<uni-icons type="plusempty" color="#27A752" size="10"></uni-icons>
					关注</view>
				</view>
			</view>
			<!-- 
			<view class="height150 flex-ju-b border-tEDEDED">
				<view class="flex-a-i">
					<image class="image wh76-76 ra76 mr10" src="../../static/aaa.png"></image>
					<view>
						<view class="bold size29">网球发烧友</view>
						<view class="color999 mt5">00年广东男孩</view>
					</view>
				</view>
				<view class="flex-a-i">
					<view class="flex-ju-c wh115-48 ra48 color999 border999">
						<image class="image width20 mr5" mode="widthFix" src="/static/img/xiaogou.png"></image>
						已关注</view>
					<view @click="tabfouce" class="width30 flex-row">
						<image class="image width6" mode="widthFix" src="/static/img/sandian.png"></image>
					</view>
				</view>
			</view> -->
			
		</view>
	</view>
	<uni-popup borderRadius="15px 15px 0 0" background-color="#F5F7F9" ref="upfocus" type="bottom">
		<view class="con pt30 pb50">
			<view @click="centel" class="bgfff height100 flex-ju-c ra15 bold colorred">
				取消关注
			</view>
		</view>
	</uni-popup>
	<uni-popup  ref="upcentelfocus" type="center">
		<view class="bgfff pt30 ra30 width480 pb30">
			<view class="flex-ju-c bold size34">确认取消关注吗？</view>
			<view class="flex-ju-c">
				<view @click="ctanen" class="ibgto-27A752-C6FF00 mt50 mb50 wh350-76 ra76 color333 flex-ju-c">确认</view>
			</view>
			<view @click="$refs.upcentelfocus.close()" class="flex-ju-c size29">取消</view>
		</view>
	</uni-popup>
</template>

<script>
	import uniIm from '@/uni_modules/uni-im/sdk/index.js';
	export default {
		data() {
			return {
				isdata:false,
				tindex:1,
				infolist:[],
				page:1,
				uid:"",
				count:0,
				sindex:"",
			}
		},
		onLoad(option) {
			// if(option.index==2){
			// 	this.guanlist(2)
			// 	this.tindex = 2
			// }else if(option.index==3){
			// 	this.guanlist(3)
			// 	this.tindex = 3
			// }else{
			// 	this.guanlist(1)
			// }
			this.guanlist(option.index)
			this.tindex = option.index
			
		},
		onReachBottom() {
			this.page++
			this.guanlist(this.tindex)
		},
		methods: {
			//   tochat(item) {
			// 	  console.log(item)
				 
			// 	uni.navigateTo({
			// 		url: '/pages/message/message?userinfo='+JSON.stringify(item)
			// 	});
				
			// },
			async tochat(item) {
				const currentConversation = await uniIm.conversation.get({
					friend_uid:item.uni_uid
				});
				console.log('currentConversation', currentConversation);
				uni.navigateTo({
					url: '/uni_modules/uni-im/pages/chat/chat?conversation_id=' + currentConversation.id
				});
				
			},
			guanzhu(item){
				this.http('/api/add_care/'+item.uid,{},'post').then(res=>{
					item.is_care = true
				})
			},
			guanlist(type){
				this.http('/api/care_list',{type,page:this.page}).then(res=>{
					this.infolist = [...this.infolist,...res.data.list]
					this.count = res.data.count
					if(this.infolist.length){
						this.isdata = false
					}else{
						this.isdata = true
					}
				})
			},
			tabfocus(index){
				this.page=1
				this.infolist = []
				this.tindex=index
				this.guanlist(index)
			},
			tabfouce(uid,index){
				this.uid=uid
				this.sindex = index
				this.$refs.upfocus.open()
			},
			centel(){
				this.$refs.upfocus.close()
				this.$refs.upcentelfocus.open()
			},
			ctanen(){
				this.http('/api/cancel_follow/'+this.uid,{},'delete').then(res=>{
					
					this.infolist.splice(this.sindex,1)
					this.$refs.upcentelfocus.close()
					if(this.infolist.length){
						this.isdata = false
					}else{
						this.isdata = true
					}
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
				})
			}
		}
	}
</script>

<style>
.active{
	background: #27A752;
}
.txtactive{
	color: #333;
}
</style>
